<template>
  <div class="home">
    <home-nav-bar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="">
    </div>
    <home-search-box />
    <home-categories />
    <div class="search-bar" v-if="isShowSearchBar">
    </div>
    <home-content />
    <button @click="moreBtn">加载更多</button>
  </div>
</template>

<script setup>
import homeNavBar from './cpns/home-nav-bar.vue';
import homeSearchBox from './cpns/home-search-box.vue';
import homeCategories from './cpns/home-categories.vue';
import homeContent from './cpns/home-content.vue';
import useHomeStore from '@/stores/modules/home';
import useScroll from '@/hooks/useScroll'

// 发起网络请求
const homeStore = useHomeStore()
homeStore.fetchHotSuggestsData()
homeStore.fetchCategoriesData()
homeStore.fetchHouseListData()

const moreBtn = () => {
    console.log('加载更多')
    homeStore.fetchHouseListData()
}

// 监听window窗口的滚动
// 1.当我们离开页面时，移除监听
// 2.如果别的页面也进行类似的监听，会编写重复代码
useScroll()
</script>

<style lang="less" scoped>
.home{
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-bottom: 60px;
}
.banner{
  img{
    width: 100%;
  }
}

.search-bar{
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    padding: 16px 16px 10px;
    background-color: #fff;
}

</style>